<template>
  <Card>
    <div class="center-top-wrap">
      <e-candlestick :id="id()" :chartData="candlestickData" @q-click="handleCandlClick" />
      <Spin fix v-show="centerTopChartLoading">加载中...</Spin>
    </div>
  </Card>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import { each, merge, last } from 'lodash'
import { candlestickOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('negativeAnomaly')

export default {
  name: 'negative-anomaly-center-top',
  components: {
    ECandlestick: () => import('@/commons/charts/ECandlestick')
  },
  computed: {
    ...mapState(['centerTopCandList', 'centerTopChartLoading', 'defaultDate', 'currentClickTableDate']),
    id() {
      return nanoid
    },
    candlestickData() {
      if (!this.centerTopCandList || this.centerTopCandList.length === 0) {
        return null
      }
      const { xAixisList, values = {}, actualGas, currentDate } = this.modifyCandlestickData(this.centerTopCandList)
      return merge({}, candlestickOptions, {
        xAxis: {
          data: xAixisList
        },
        series: [
          {
            data: values.data,
            markPoint: {
              data: values.markPointData
            }
          },
          {
            data: actualGas
          },
          {
            ...currentDate
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions(['loadCenterTopCandData', 'loadAbnormalData']),
    modifyCandlestickData(rawData = []) {
      let xAixisList = []
      let values = []
      const actualGas = []
      const markPointData = []
      let _currentDate = null
      each(rawData, (item, index) => {
        const [first, one, two, three, four, five] = item
        xAixisList.push(first)
        let color0 = '#ec0000'
        let borderColor0 = '#8A0000'
        let color = '#00da3c'
        let borderColor = '#008F28'
        const lastItem = last(item)
        if (lastItem) {
          color0 = '#ff9900'
          borderColor0 = '#ff9900'
          color = '#ff9900'
          borderColor = '#ff9900'
          markPointData.push({
            name: first,
            value: two,
            coord: [first, two],
            itemStyle: {
              color: '#ff9900'
            }
          })
        }

        if (this.currentClickTableDate === first) {
          _currentDate = {
            markPoint: {
              data: [
                {
                  name: first,
                  value: five,
                  coord: [first, five],
                  symbol: 'arrow',
                  symbolSize: 14,
                  itemStyle: { color: '#2d8cf0' }
                }
              ]
            }
          }
        }
        if (five < 0) {
          color0 = '#ed141e'
          borderColor0 = '#ed141e'
          color = '#ed141e'
          borderColor = '#ed141e'
        }
        values.push({
          name: first,
          value: [one, two, four, three],
          itemStyle: {
            color,
            borderColor,
            borderColor0,
            color0
          }
        })
        actualGas.push(five)
      })

      return {
        xAixisList,
        values: {
          data: values,
          markPointData
        },
        actualGas,
        currentDate: _currentDate
      }
    },
    handleCandlClick(params) {
      const { name } = params
      this.loadAbnormalData({
        days: name
      })
    }
  }
}
</script>
<style lang="less" scoped>
.center-top-wrap {
  width: 100%;
  height: 100%;
}
</style>
